<template>
	<view>
		<!-- <text class="iconfont icon-xiangzuojiantou"></text> -->
		<view class="">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item>
					<text></text>
					<!-- <image src="../../static/image/classification/1.png" mode=""></image> -->
					<image :src="IP+str" mode=""></image>
				</swiper-item>
				<swiper-item>
					<!-- <image src="../../static/image/classification/2.png" mode=""></image> -->
					<image :src="IP+str2" mode=""></image>

				</swiper-item>
				<!-- <swiper-item>
					<image src="../../static/image/classification/3.png" mode=""></image>

				</swiper-item>
				<swiper-item>
					<image src="../../static/image/classification/4.png" mode=""></image>

				</swiper-item> -->
			</swiper>
		</view>
		<view class="zt">
			<view class="nav">
				<text>￥{{tt.qian}}</text>
				<text>月售500笔</text>
			</view>
			<view class="nav-2">

				<text class="rx">Rx</text><text class="nav-2-1">{{tt.tit}}5mg*7片/盒</text>
			</view>
			<view class="nav-3">
				<text>本品为处方药，请在医师指导下使用</text>
			</view>
			<view class="nav-4">
				<text>运费：快递{{tt.yf}}元，满88包邮</text>
			</view>

		</view>
		<view class="xian">
		</view>
		<view class="nav-5">
			<text>促销</text>
			<view class="nav-5-t">
				<text>促销</text> 满300减30
			</view>
		</view>
		<view class="xian">
		</view>
		<view class="nav-6">
			<view class="nav-6-t1">
				
				规格 <text>Rx:{{tt.gg}};</text>
			</view>
			<view class="nav-6-t2">
				
				批准文号: <text>{{tt.wh}}</text>
			</view>
			<view class="nav-6-t3">
				本品不支持退换货；新老包装随机发货
			</view>
		</view>
		<view class="xian">
		</view>
		<view class="nav-7">
			<view class="nav-7-t1">
				主治功能
			</view>
			<view class="nav-7-t2">
			
				<text>{{tt.gn}}</text>
			</view>
			<view class="nav-7-t1">
				用法用量
			</view>
			<view class="nav-7-t2">
				
				{{tt.yfyl}}
			</view>
			<view class="nav-7-t3">
				<text class="hh" @click="open">药品说明书</text><text class="iconfont icon-youjiantou"></text>
				<uni-popup ref="popup" type="center" :animation="false">
					<button @click="close" size="mini" type="default" class="im">关闭</button>
					<image :src="IP+tt.shuo" mode="" id="iimm"></image>
				</uni-popup>

			</view>
		</view>
		<view class="xian">
		</view>
		<view class="nav-8">
			<view class="">
				详情
			</view>
			<image :src="IP+tt.img" mode=""></image>
		</view>
		<view class="nav-9">
			<navigator url="/pages/classification-pharmacist/classification-pharmacist">
				<view class="nav-9-1" @click="zx(tt.tit)">
					<text class="iconfont icon-zhaoyaoshi ii"></text>
					<text>
						药师咨询
					</text>
				</view>
			</navigator>

			<view class="nav-9-1" @click="qd">
				<text class="iconfont icon-qingdan ii iii"></text>
				<text class="iii">
					清单
				</text>
			</view>
			<view class="nav-9-2">
				<button size="mini" @click="jr">加入清单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import {
		onMounted,
		computed,
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	export default {
		setup() {
			const store = useStore()
			let tt = ref({})
			let yh = ref()
			let IP = ref({})
			let arr = ''
			let str = ''
			let str2 = ''
			IP.value = store.state.IP
			tt.value = store.state.classification.b
			arr = tt.value.bo
			let ind = arr.indexOf(",")
			arr.split()
			// console.log(arr)
			str = arr.substr(0, ind)
			// console.log(str)
			str2 = arr.substr(ind + 1, arr.length)
			// console.log(str2)
			yh.value = store.state.userID

			function qd() {
				// console.log(1)
				uni.switchTab({
					url: '/pages/shopcart/shopcart'
				})
			}

			function zx(v) {
				// console.log(1)
				store.commit('classification/sooo', v)
			}

			function getTimes() {
				//获取当前时间
				let myDate = new Date();
				let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let myToday = myDate.getDate(); //获取当前日(1-31)
				let myHour = myDate.getHours(); //获取当前小时数(0-23)
				let myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
				let mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
				let nowTime;
				myMonth = myMonth < 10 ? "0" + myMonth : myMonth;
				myToday = myToday < 10 ? "0" + myToday : myToday;
				myHour = myHour < 10 ? "0" + myHour : myHour;
				myMinute = myMinute < 10 ? "0" + myMinute : myMinute;
				mySecond = mySecond < 10 ? "0" + mySecond : mySecond;
				nowTime =
					myYear +
					"-" +
					myMonth +
					"-" +
					myToday +
					" " +
					myHour +
					":" +
			 	myMinute +
					":" +
					mySecond;
				return nowTime;
			}

			function jr() {
				uni.showModal({
					title: '加入清单成功',
					content: '是否继续添加?',
					cancelText: '回到首页',
					success: (res) => {
						// console.log(res);
						if (res.cancel) {
							wx.switchTab({
								url: '/pages/index/index'
							})
						}
					}

				})
				let uid = yh.value
				let ctime = getTimes()
				let xtime = getTimes()
				let id = tt.value.id
				let qian = tt.value.qian
				let bianhao = Math.floor(Math.random() * 1000)
				let gg = tt.value.gg
				http({
					url: '/classification-Details',
					method:'post',
					data: {
						id:1,
						bianhao:bianhao,
						qian:qian,
						zhuangtai:'待支付',
						ctime:ctime,
						xtime:xtime,
						yhid:uid,
						ypid:id,
						shuliang:1,
						guige:gg,
						isd:0
					}

				}).then((res) => {

					console.log(res)

				})
			}
			// function open() {
			// 		// console.log(this)
			// 	this.$refs.popup.open('')
			// };

			// function close() {
			// 	this.$refs.popup.close()
			// }

			return {
				tt,
				qd,
				zx,
				jr,
				getTimes,
				yh,
				IP,
				arr,
				str,
				str2,
				ind
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			}

		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	@clo: #999999;
	@zuo: 30rpx;

	swiper-item {
		text-align: center;
	}

	swiper-item image {
		width: 440rpx;
		height: 270rpx;
	}

	.im {
		margin-top: 30rpx;
	}

	#iimm {
		margin: 5% 0 10% 0;
		width: 750rpx;
		height: 1200rpx;
	}

	.xian {
		height: 30rpx;
		width: 750rpx;
		background-color: #F2F2F2;
	}

	.zt {
		padding-left: @zuo;
	}

	.nav {
		display: flex;
		width: 750rpx;
		padding-right: @zuo;
	}

	.nav text {
		width: 375rpx;
	}

	.nav text:nth-child(1) {
		color: #FF0000;
	}

	.nav text:nth-child(2) {
		text-align: right;
		margin-right: 120rpx;
		color: @clo;
	}

	.rx {
		display: inline-block;
		background-color: #DA2222;
		color: #FCFFFF;
		width: 55rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.nav-2 {
		margin-top: 15rpx;
	}

	.nav-2-1 {
		font-weight: 700;
	}

	.nav-3 {
		margin: 15rpx 0;
		color: @clo;
	}

	.nav-4 {
		margin-bottom: @zuo;
		color: @clo;
	}

	.nav-5 {
		padding-top: @zuo;
		padding-left: @zuo;
	}

	.nav-5-t {
		padding-left: 90rpx;
		color: @clo;
		padding-bottom: 100rpx;

	}

	.nav-5-t text {
		color: #FF0000;
	}

	.nav-6 {
		padding: 40rpx 0 @zuo @zuo;
	}

	.nav-6-t1 text {
		color: @clo;
	}

	.nav-6-t2 {
		margin-top: @zuo;
	}

	.nav-6-t2 text {
		color: @clo;
		margin-left: 20rpx;
	}

	.nav-6-t3 {
		color: @clo;
		margin-top: @zuo;
	}

	.nav-7 {
		padding: 40rpx 0 @zuo @zuo;

	}

	.nav-7-t2 {
		margin: @zuo 0;
		color: @clo;
	}

	.nav-7-t3 {
		text-align: right;
		padding-right: ceil(@zuo * 2);


	}

	.nav-7-t3 .hh {
		color: #FF0000;
	}

	.nav-8 {
		text-align: center;

	}

	.nav-8 view {
		text-align: left;
		margin-left: @zuo;
		margin-top: @zuo;
	}

	.nav-8 image {
		width: 442rpx;
		height: 450rpx;
	}

	.nav-9 {
		display: flex;
		width: 750rpx;
		margin-bottom: @zuo;

	}

	.nav-9>view {
		width: 250rpx;
	}

	.nav-9-1 {

		text-align: center;
		display: flex;
		flex-wrap: wrap;
	}

	.nav-9-1>text {
		width: 250rpx;
	}

	.iii {
		text-align: left;
	}

	.nav-9 button {
		background-color: #DA2222;
		color: #FFFFFF;
		width: 250rpx;
		height: 96rpx;
		line-height: 96rpx;
	}

	.ii {
		font-size: 50rpx;
	}
</style>
